<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/warpper.css">
    <link rel="stylesheet" href="./css/header_footer.css">
    <link rel="stylesheet" href="./css/slider.css">
    <link rel="stylesheet" href="./css/product list.css">
    <script src="./lib/jquery.js"></script>
    <script src="./lib/slider.js"></script>
    <script src="./js/product list.js"></script>

    <!-- <script>
        $(function(){
            // 图书区域手风琴
            $(".ebooks_right ul li").mouseenter(function(){
                $(this).find("h5").addClass("title_hide").next().addClass("ebooks_show")
                $(this).siblings().find("h5").removeClass("title_hide")
                $(this).siblings().find("div").removeClass("ebooks_show")
            })
            //固定顶部
            $(window).scroll(function(){
                let sTop=$(this).scrollTop();
                if (sTop>200) {
                    $(".fixedHeader").show()
                }else{
                    $(".fixedHeader").hide()
                }
            })
            //顶部数据传入
            $(".header .search input:first-child").keyup(function(){
                
                let v=$(".header .search input:first-child").val();
                console.log(v);
                $(".fixedHeader .search input:first-child").val(v)
            })

            $(".banner .banner_right ul li").mouseenter(function(){
                // $(this).show(1000).siblings().hide(1000)
                $(this).css("height",141).siblings().css("height",42)
            })
            // 海报轮播图
            my_slider($("#bannerInner"),470,1000,440)
            
        })
    </script> -->
</head>
<body>
    
    <!-- 顶部区域开始 -->
    <div class="top1">
        <div class="warpper clearfix">
            <p class="fl">legochina.cn</p>
            <span class="fr">
                欢迎光临
                <a href="#">乐购</a>,
                请 登陆\
                <a href="#">注册</a>
            </span>
        </div>
    </div>
    <!-- 顶部区域结束 -->

    <!-- 头部区域开始 -->
    <div class="header warpper clearfix">
        <div class="fl">
            <img src="./imgs/logo.jpg" alt="">
        </div>
        <div class="fr">
            <form action="#" class="clearfix search">
                <input type="text" placeholder="zed">
                <input type="button" class="input2">
                <a href="" class="_a1 fl">
                    <span></span>
                    购物车&nbsp;3
                </a>
                <a href="" class="_a2 fl">我的订单</a>
            </form>
            
        </div>
        <ul class="fr clearfix">
            <li>图书</li>
            <li>电子书</li>
            <li>原创文学</li>
            <li>服装</li>
            <li>运动户外</li>
            <li>孕婴童</li>
            <li>家居</li>
            <li>创意文具</li>
            <li>地方特产</li>
            <li>海外购</li>
            <li>电器城</li>
        </ul>
    </div>
    <!-- 头部区域结束 -->

    <!-- 海报区域开始 -->
    <div class="banner warpper clearfix">
        <div class="clearfix">
            <!-- 左边 -->
            <div class="pptbox fl" id="bannerInner">
                <!--轮播的内容-->
                <ul class="innerwrapper">
                <li>
                    <img src="imgs/banner1.jpg" />
                </li>
                <li>
                    <a href="#"></a><img src="imgs/banner2.jpg" /></a>
                </li>
                <li>
                    <a href="#"><img src="imgs/banner3.jpg" /></a>
                </li>
                <li>
                    <a href="#"><img src="imgs/banner4.jpg" /></a>
                </li>
                <li>
                    <a href="#"><img src="imgs/banner5.jpg" /></a>
                </li>
                <li>
                    <a href="#"><img src="imgs/banner2.jpg"></a>
                </li>
                </ul>
                <!--数字控制器-->
                <ul class="controls">
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                </ul>
                <!--按钮控制器-->
                <span class="btnleft"></span>
                <span class="btnright"></span>
            </div>
            <!-- 右边 -->
            <div class="banner_right fl">
                <h3>热卖畅销</h3>
                <ul>
                    <script>
                        for(let i=0;i<8;i++){
                            document.write(`
                                <li class="clearfix active">
                                    <span class="fr">${i+1}</span>
                                    <img src="./imgs/书籍/23579654-1_l.jpg" alt="" class="fl">
                                    <p class="fr">
                                        《三体》刘慈欣一场科幻的史诗风暴
                                    </p>
                                </li>
                            
                            `)
                        }
                    </script>
                    
                </ul>
            </div>
        </div>
        <div>
            <img src="./imgs/moshou.png" alt="">
        </div>
    </div>
    <!-- 海报区域结束 -->

    <!-- 折扣区 -->
    <div class="content warpper">
        <div class="content_top">
            <h3 class="h3_ f60_b">乐购·图书折扣区</h3>
        </div>
        <ul class="clearfix">
            
            <script>
                for(let i=0;i<5;i++){
                    document.write(`
                        <li>
                            <div>
                                <img src="./imgs/书籍/22935553-1_l.jpg" alt="">
                            </div>
                            <div>
                                <img src="./imgs/eightzhe.png" alt="">
                            </div>
                            <p>白夜行 &emsp;东野上吾</p>
                            <p>
                                推荐:
                                <img src="./imgs/XX.png" alt="">
                            </p>
                            <span>￥:38</span>
                            <span>￥:58</span>
                        </li>
                    `)
                }
            </script>
            <script>
                for(let i=0;i<5;i++){
                    document.write(`
                        <li>
                            <div>
                                <img src="./imgs/书籍/22788959-1_l.jpg" alt="">
                            </div>
                            <div>
                                <img src="./imgs/sixzhe.png" alt="">
                            </div>
                            <p>白夜行 &emsp;东野上吾</p>
                            <p>
                                推荐:
                                <img src="./imgs/XX.png" alt="">
                            </p>
                            <span>￥:30</span>
                            <span>￥:46</span>
                        </li>
                    `)
                }
            </script>
        </ul>
    </div>
    <!-- 折扣区结束 -->

    <!-- 新书上架 -->
    <!-- 电子书区域开始 -->
    <div class="ebooks warpper clearfix">
        <div class="ebooks_left clearfix fl">
            <!-- 头部 -->
            <h3>
                <span class="span_">新</span>
                书上架
            </h3>
            <div style="width: 906px;">
                <ul class="clearfix">
                    <!-- <li>
                        <div><img src="./imgs/书籍/22928335-1_l.jpg" alt=""></div>
                        <p>查理&emsp; 斯密斯</p>
                        <p>中国邮电出版社</p>
                        <span>￥49</span>
                        <span>￥79</span>
                    </li> -->
                    <script>
                        for(let i=0;i<5;i++){
                            document.write(`
                            <li>
                                <div><img src="./imgs/书籍/22928335-1_l.jpg" alt=""></div>
                                <p>查理&emsp; 斯密斯</p>
                                <p>中国邮电出版社</p>
                                <span>￥49</span>
                                <span>￥79</span>
                            </li>
                            `)
                        }
                    </script>
                    <script>
                        for(let i=0;i<5;i++){
                            document.write(`
                                <li>
                                <div><img src="./imgs/书籍/22499729-1_l_5.jpg" alt=""></div>
                                <p>查理&emsp; 斯密斯</p>
                                <p>中国邮电出版社</p>
                                <span>￥49</span>
                                <span>￥79</span>
                                </li>
                            `)
                        }
                    </script>
                    
                </ul>
            </div>
            
        </div>
        <!-- 手风琴 -->
        <div class="ebooks_right fr">
            <h4>新书畅销榜</h4>
            <ul>
                <li>
                    <span>1</span>
                    <h5 class="title_hide">就喜欢你看不惯我  又干不</h5>
                    <div class="ebooks_show clearfix">
                        <img src="./imgs/index08_05.jpg" alt="" class="fl">
                        <div class="ebooks_txt fr"> 
                            <p>
                                从你的世界路过
                            </p>
                            <p>
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                            </p>
                        </div>
                    </div>
                </li>
                <script>
                    for(let i=1;i<8;i++){
                        document.write(`
                        <li>
                            <span>${i+1}</span>
                            <h5>就喜欢你看不惯我  又干不</h5>
                            <div class="clearfix">
                                <img src="./imgs/index08_05.jpg" alt="" class="fl">
                                <div class="ebooks_txt fl"> 
                                    <p>
                                        从你的世界路过
                                    </p>
                                    <p>
                                        入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                                    </p>
                                </div>
                            </div>
                        </li>
                        `)
                    }
                </script>
            </ul>
        </div>
    </div>
    <!-- 电子书区域结束 -->

    <!-- 独家区域 -->
    <div class="Exclusive_offers warpper">
        <h3 class="clearfix">
            <div class="fl">
                <span class="span_ f60_b">独</span>
                家提供
            </div>
            <div class="fr">
                <span class="active">货币金融</span>
                <span>社会文学</span>
                <span>科学技术</span>
                <span>儿童文学</span>
                <span>教学参辅</span>
                <span>生活</span>
                <span>小说</span>
            </div>
        </h3>
        <!-- 轮播图开始 -->
        <div class="pptbox on" id="bannerInner">
            <!--轮播的内容-->
            <ul class="innerwrapper">
                <li>
                    <ul class="box_1 clearfix">
            
                        <script>
                            for(let i=0;i<12;i++){
                                document.write(`
                                    <li>
                                        <div><img src="./imgs/书籍/22913031-1_l.jpg" alt=""></div>
                                        <p>查理&emsp; 斯密斯</p>
                                        <p>中国邮电出版社</p>
                                        <span>￥49</span>
                                        <span>￥79</span>
                                    </li>
                                `)
                            }
                        </script>
                        
                    </ul>
                    
                </li>
                <li>
                    <ul class="box_1 clearfix">
            
                        <script>
                            for(let i=0;i<12;i++){
                                document.write(`
                                    <li>
                                        <div><img src="./imgs/书籍/22913031-1_l.jpg" alt=""></div>
                                        <p>查理&emsp; 斯密斯</p>
                                        <p>中国邮电出版社</p>
                                        <span>￥49</span>
                                        <span>￥79</span>
                                    </li>
                                `)
                            }
                        </script>
                        
                    </ul>
                    
                </li>
                <li>
                    <ul class="box_1 clearfix">
            
                        <script>
                            for(let i=0;i<12;i++){
                                document.write(`
                                    <li>
                                        <div><img src="./imgs/书籍/22913031-1_l.jpg" alt=""></div>
                                        <p>查理&emsp; 斯密斯</p>
                                        <p>中国邮电出版社</p>
                                        <span>￥49</span>
                                        <span>￥79</span>
                                    </li>
                                `)
                            }
                        </script>
                        
                    </ul>
                    
                </li>
            </ul>
            <!--数字控制器-->
            <ul class="controls">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            </ul>
            <!--按钮控制器-->
            <span class="btnleft"></span>
            <span class="btnright"></span>
        </div>
        <!-- 轮播图结束 -->
        <!-- 轮播图开始 -->
        <div class="pptbox" id="bannerInner">
            <!--轮播的内容-->
            <ul class="innerwrapper">
                <li>
                    <ul class="box_1 clearfix">
            
                        <script>
                            for(let i=0;i<12;i++){
                                document.write(`
                                    <li>
                                        <div><img src="./imgs/书籍/pro-demo.jpg" alt=""></div>
                                        <p>查理&emsp; 斯密斯</p>
                                        <p>中国邮电出版社</p>
                                        <span>￥49</span>
                                        <span>￥79</span>
                                    </li>
                                `)
                            }
                        </script>
                        
                        
                    </ul>
                    
                </li>
                <li>
                    <ul class="box_1 clearfix">
            
                        <script>
                            for(let i=0;i<12;i++){
                                document.write(`
                                    <li>
                                        <div><img src="./imgs/书籍/pro-demo.jpg" alt=""></div>
                                        <p>查理&emsp; 斯密斯</p>
                                        <p>中国邮电出版社</p>
                                        <span>￥49</span>
                                        <span>￥79</span>
                                    </li>
                                `)
                            }
                        </script>
                        
                        
                    </ul>
                    
                </li>
                <li>
                    <ul class="box_1 clearfix">
            
                        <script>
                            for(let i=0;i<12;i++){
                                document.write(`
                                    <li>
                                        <div><img src="./imgs/书籍/pro-demo.jpg" alt=""></div>
                                        <p>查理&emsp; 斯密斯</p>
                                        <p>中国邮电出版社</p>
                                        <span>￥49</span>
                                        <span>￥79</span>
                                    </li>
                                `)
                            }
                        </script>
                        
                    </ul>
                    
                </li>
            </ul>
            <!--数字控制器-->
            <ul class="controls">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            </ul>
            <!--按钮控制器-->
            <span class="btnleft"></span>
            <span class="btnright"></span>
        </div>
        <!-- 轮播图结束 -->
        <!-- 轮播图开始 -->
        <div class="pptbox" id="bannerInner">
            <!--轮播的内容-->
            <ul class="innerwrapper">
                <li>
                    <ul class="box_1 clearfix">
            
                        <script>
                            for(let i=0;i<6;i++){
                                document.write(`
                                    <li>
                                        <div><img src="./imgs/书籍/pro-demo.jpg" alt=""></div>
                                        <p>查理&emsp; 斯密斯</p>
                                        <p>中国邮电出版社</p>
                                        <span>￥49</span>
                                        <span>￥79</span>
                                    </li>
                                `)
                            }
                        </script>
                        <script>
                            for(let i=0;i<6;i++){
                                document.write(`
                                    <li>
                                        <div><img src="./imgs/书籍/22913031-1_l.jpg" alt=""></div>
                                        <p>查理&emsp; 斯密斯</p>
                                        <p>中国邮电出版社</p>
                                        <span>￥49</span>
                                        <span>￥79</span>
                                    </li>
                                `)
                            }
                        </script>
                        
                    </ul>
                    
                </li>
                <li>
                    <ul class="box_1 clearfix">
            
                        <script>
                            for(let i=0;i<6;i++){
                                document.write(`
                                    <li>
                                        <div><img src="./imgs/书籍/pro-demo.jpg" alt=""></div>
                                        <p>查理&emsp; 斯密斯</p>
                                        <p>中国邮电出版社</p>
                                        <span>￥49</span>
                                        <span>￥79</span>
                                    </li>
                                `)
                            }
                        </script>
                        <script>
                            for(let i=0;i<6;i++){
                                document.write(`
                                    <li>
                                        <div><img src="./imgs/书籍/22913031-1_l.jpg" alt=""></div>
                                        <p>查理&emsp; 斯密斯</p>
                                        <p>中国邮电出版社</p>
                                        <span>￥49</span>
                                        <span>￥79</span>
                                    </li>
                                `)
                            }
                        </script>
                        
                    </ul>
                    
                </li>
                <li>
                    <ul class="box_1 clearfix">
            
                        <script>
                            for(let i=0;i<6;i++){
                                document.write(`
                                    <li>
                                        <div><img src="./imgs/书籍/pro-demo.jpg" alt=""></div>
                                        <p>查理&emsp; 斯密斯</p>
                                        <p>中国邮电出版社</p>
                                        <span>￥49</span>
                                        <span>￥79</span>
                                    </li>
                                `)
                            }
                        </script>
                        <script>
                            for(let i=0;i<6;i++){
                                document.write(`
                                    <li>
                                        <div><img src="./imgs/书籍/22913031-1_l.jpg" alt=""></div>
                                        <p>查理&emsp; 斯密斯</p>
                                        <p>中国邮电出版社</p>
                                        <span>￥49</span>
                                        <span>￥79</span>
                                    </li>
                                `)
                            }
                        </script>
                        
                    </ul>
                    
                </li>
            </ul>
            <!--数字控制器-->
            <ul class="controls">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            </ul>
            <!--按钮控制器-->
            <span class="btnleft"></span>
            <span class="btnright"></span>
        </div>
        <!-- 轮播图结束 -->
        
    </div>
    <!-- 独家区域完成 -->

    <!-- 猜你喜欢区域 -->
    <div class="guess warpper">
        <h3 class="clearfix">
            <div class="fl">
                <span class="span_ f60_b">猜</span>
                你喜欢
            </div>
            <div class="guess_hyp fr">
                <p>换一批</p>
            </div>
        </h3>
        <div class="div_box">
            <div class="move_div">
                <ul class="clearfix">
                    <script>
                        for(let i=0;i<12;i++){
                            document.write(`
                                <li>
                                    <div><img src="./imgs/书籍/pro-demo.jpg" alt=""></div>
                                    <p>查理&emsp; 斯密斯</p>
                                    <p>中国邮电出版社</p>
                                    <span>￥49</span>
                                    <span>￥79</span>
                                </li>
                            `)
                        }
                    </script>
                </ul>
                <ul class="clearfix">
                    <script>
                        for(let i=0;i<12;i++){
                            document.write(`
                                <li>
                                    <div><img src="./imgs/书籍/22913031-1_l.jpg" alt=""></div>
                                    <p>查理&emsp; 斯密斯</p>
                                    <p>中国邮电出版社</p>
                                    <span>￥49</span>
                                    <span>￥79</span>
                                </li>
                            `)
                        }
                    </script>
                </ul>
                <ul class="clearfix">
                    <script>
                        for(let i=0;i<12;i++){
                            document.write(`
                                <li>
                                    <div><img src="./imgs/书籍/23206608-1_l.jpg" alt=""></div>
                                    <p>查理&emsp; 斯密斯</p>
                                    <p>中国邮电出版社</p>
                                    <span>￥49</span>
                                    <span>￥79</span>
                                </li>
                            `)
                        }
                    </script>
                </ul>
            </div>
            <div class="move_div">
                <ul class="clearfix">
                    <script>
                        for(let i=0;i<12;i++){
                            document.write(`
                                <li>
                                    <div><img src="./imgs/书籍/pro-demo.jpg" alt=""></div>
                                    <p>查理&emsp; 斯密斯</p>
                                    <p>中国邮电出版社</p>
                                    <span>￥49</span>
                                    <span>￥79</span>
                                </li>
                            `)
                        }
                    </script>
                </ul>
                <ul class="clearfix">
                    <script>
                        for(let i=0;i<12;i++){
                            document.write(`
                                <li>
                                    <div><img src="./imgs/书籍/22913031-1_l.jpg" alt=""></div>
                                    <p>查理&emsp; 斯密斯</p>
                                    <p>中国邮电出版社</p>
                                    <span>￥49</span>
                                    <span>￥79</span>
                                </li>
                            `)
                        }
                    </script>
                </ul>
                <ul class="clearfix">
                    <script>
                        for(let i=0;i<12;i++){
                            document.write(`
                                <li>
                                    <div><img src="./imgs/书籍/23206608-1_l.jpg" alt=""></div>
                                    <p>查理&emsp; 斯密斯</p>
                                    <p>中国邮电出版社</p>
                                    <span>￥49</span>
                                    <span>￥79</span>
                                </li>
                            `)
                        }
                    </script>
                </ul>
            </div>
        </div>
    </div>
    <!-- 猜你喜欢区域结束 -->
    
    <div class="hy warpper">
        <ul class="clearfix">
            <li>
                <img src="./imgs/促销活动用图/2016080314240628345.jpg" alt="">
            </li>
            <li>
                <img src="./imgs/促销活动用图/2016080314240628345.jpg" alt="">
            </li>
            <li>
                <img src="./imgs/促销活动用图/2016080314240628345.jpg" alt="">
            </li>
            <li>
                <img src="./imgs/促销活动用图/2016080314240628345.jpg" alt="">
            </li>
            <li>
                <img src="./imgs/促销活动用图/2016080314240628345.jpg" alt="">
            </li>
            <li>
                <img src="./imgs/促销活动用图/2016080314240628345.jpg" alt="">
            </li>
        </ul>
        <div>
            <img src="./imgs/moshou.png" alt="">
        </div>
    </div>
    <!-- 页脚区域开始 -->
    <div class="footer">
        <div class="footer_top">
            <ul class="warpper clearfix">
                <li>
                    <img src="./imgs/222_11.png" alt="">
                </li>
                <li>
                    <img src="./imgs/222_13.png" alt="">
                </li>
                <li>
                    <img src="./imgs/222_15.png" alt="">
                </li>
                <li>
                    <img src="./imgs/222_17.png" alt="">
                </li>
            </ul>
        </div>
        <div class="footer_mid warpper clearfix">
            <ul class="ul1">
                <li>购物指南</li>
                <li>购物流程</li>
                <li>发票制度</li>
                <li>账户管理</li>
                <li>会员优惠</li>
            </ul>
            <ul>
                <li>支付方式</li>
                <li>货到付款</li>
                <li>网上支付</li>
                <li>礼品卡支付</li>
                <li>银行转帐</li>
            </ul>
            <ul>
                <li>订单服务</li>
                <li>订单配送查询</li>
                <li>订单状态说明</li>
                <li>自助取消订单</li>
                <li>自助修改订单</li>
            </ul>
            <ul>
                <li>退换货</li>
                <li>退换货政策</li>
                <li>自助申请退换货</li>
                <li>退换货进度查询</li>
                <li>退款方式和时间</li>
            </ul>
            <ul>
                <li>商家服务</li>
                <li>商家中心</li>
                <li>运营服务</li>
                <li>加入尾品汇</li>
            </ul>
            <img src="./imgs/logo_00.png" alt="">
        </div>
        <div class="footer_bom warpper">
            <p>
                公司简介 &emsp; | &emsp; Investor Relations  &emsp;| &emsp; 网站联盟  &emsp;|&emsp;  乐购招商  &emsp;|&emsp;  机构销售  &emsp;|&emsp;  手机乐购  &emsp;|&emsp;  官方Blog   &emsp;|&emsp;  热词搜索
            </p>
            <p>
                Copyright (C) 乐购网 2004-2016, All Rights Reserved
            </p>
        </div>
    </div>
    <!-- 页脚区域结束 -->

    <!-- 头部固定 -->
    <div class="fixedHeader b_b">
        <script>
            $(".header .search").clone().appendTo(".fixedHeader")
        </script>
    </div>

    
    <!-- <script type="text/javascript">
        //主轮播图
        $("#bannerInner").tyslide({
          boxh: 470,//盒子的高度
          w: 1000,//盒子的宽度
          h: 440,//图片的高度
          isShow: true,//是否显示控制器
          isShowBtn: true,//是否显示左右按钮
          controltop: 0,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
          controlsW: 20,//控制按钮宽度
          controlsH: 20,//控制按钮高度
          radius: 10,//控制按钮圆角度数
          controlsColor: "#d7d7d7",//普通控制按钮的颜色
          controlsCurrentColor: "#ff6600",//当前控制按钮的颜色
          isShowNum: true //是否显示数字
        });
      </script> -->
</body>
</html>